<template>
  <div>
    <!-- 面包屑 -->
    <bread :bread="$route.meta.bread"></bread>
    <!-- 内容区域 -->
    <div style="margin-top: 50px">
      <el-form label-width="80px" :model="goods" ref="goodsForm" :rules="rules">
        <el-form-item label="商品名称" prop="goods_name">
          <el-input
            placeholder="输入商品名称"
            v-model="goods.goods_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input
            placeholder="输入商品价格"
            v-model="goods.goods_price"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_number">
          <el-input
            placeholder="输入商品数量"
            v-model="goods.goods_number"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
          <el-input
            placeholder="输入商品重量"
            v-model="goods.goods_weight"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-cascader v-model="goods.goods_cat" :options="cate"></el-cascader>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
            action="https://www.liulongbin.top:8888/api/private/v1/upload"
            list-type="picture-card"
            :auto-upload="true"
            :headers="obj"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions"> </span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="文章详情">
          <div>
            <quill-editor
              ref="myTextEditor"
              v-model="goods.goods_introduce"
            ></quill-editor>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addGoods('goodsForm')"
            >添加商品</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import bread from "../common/bread.vue";
import arr from "@/utils/arr";

//导入富文本编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
export default {
  components: { bread, quillEditor },
  data() {
    return {
      goods: {
        goods_name: "",
        goods_cat: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        // 商品图片地址
        pics: [],
      },
      rules: {
        goods_name: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur",
          },
        ],
        goods_price: [
          {
            required: true,
            message: "请输入商品价格",
            trigger: "blur",
          },
        ],
        goods_weight: [
          {
            required: true,
            message: "请输入商品重量",
            trigger: "blur",
          },
        ],
        goods_number: [
          {
            required: true,
            message: "请输入商品数量",
            trigger: "blur",
          },
        ],
      },
      cate: [
        {
          value: "1",
          label: "北京",
          children: [
            {
              value: "2",
              label: "延庆区",
              children: [
                {
                  value: "5",
                  label: "国际城",
                },
              ],
            },
            {
              value: "3",
              label: "昌平区",
              children: [
                {
                  value: "6",
                  label: "国际城",
                },
              ],
            },
            {
              value: "4",
              label: "朝阳区",
              children: [
                {
                  value: "7",
                  label: "国际城",
                },
              ],
            },
          ],
        },
      ],
      //header数据
      obj: { Authorization: window.sessionStorage.getItem("03B_token") },
    };
  },
  created() {},
  mounted() {},
  methods: {
    //   添加商品
    addGoods(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.goods.goods_cat = this.goods.goods_cat.join(",");
          //   请求接口
          this.$axios
            .post(
              "https://www.liulongbin.top:8888/api/private/v1/goods",
              this.goods
            )
            .then((res) => {
              if (res.meta.status == 201) {
                this.$message.success(res.meta.msg);
                this.$router.push("/admin/goods/wares");
              } else {
                this.$message.error(res.meta.msg);
              }
            });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
  },
  //获取分类参数的接口
  getCateList() {
    this.$axios
      .get("https://www.liulongbin.top:8888/api/private/v1/categories")
      .then((res) => {
        console.log(res.data);
        let tree = []; //定义一个空数组用来放二级分类的数据
        arr.setCate(res.data, tree); //递归调用方法格式
        console.log(tree);
        this.cate = tree;
      });
  },
};
</script>

<style scoped>
</style>
